<template>
  <a-modal
    width="90%"
    v-drag
    :dialog-style="{ top: '20px' }"
    :destroyOnClose="true"
    :maskClosable="false"
    :visible="visible"
    :title="title"
    @cancel="cancel"
  >
    <template slot="footer">
      <a-button key="back" @click="cancel"> 关闭 </a-button>
    </template>
    <a-spin :spinning="spinning">
      <div :style="'height:' + height + 'px'">
        <el-amap
          ref="amap"
          vid="amap"
          :rotateEnable="true"
          :mapStyle="mapConfig.mapStyle"
          :zoom="mapConfig.zoom"
          :plugin="mapConfig.plugin"
          :center="mapConfig.center"
          :events="mapConfig.events"
        >
          <el-amap-marker
            v-for="(marker, index) in markers"
            :position="marker.position"
            :offset="marker.offset"
            :title="marker.title"
            :label="marker.label"
            :icon="marker.icon"
            :key="index"
            :event="marker.event"
            :events="marker.events"
          ></el-amap-marker>
        </el-amap>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import Vue from 'vue'
import VueAMap from "vue-amap";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
    // 高德key
    key: "327aa1833e23ec878cc99d3d8374786e",
    // 插件集合 （插件按需引入）
    plugin: [
        "AMap.Geolocation",
        "AMap.Scale",
        "AMap.Autocomplete",
        "AMap.PlaceSearch",
        "AMap.OverView",
        "AMap.ToolBar",
        "AMap.MapType",
        "AMap.PolyEditor",
        "AMap.CircleEditor",
        "AMap.MarkerClusterer",
    ],
    v: "1.4.15", // 我也不知道为什么要写这个，不写项目会报错，而且我随便写的，跟我下载的版本对应不了
    uiVersion: "1.0.11", // ui版本号，也是需要写，不配置不加载,
});
export default {
  name: "districtmap",
  data() {
    const that = this;
    return {
      height: window.innerHeight - 300,
      spinning: false,
      markers: [],
      mapConfig: {
        mapStyle: "dark", //设置地图显示样式，目前支持normal（默认样式）、dark（深色样式）、light（浅色样式）、fresh(osm清新风格样式)四种
        events: {
          init(o) {
            that.map = o;
            console.log(o.getCenter());
          },
          complete: (o) => {
            that.$refs.amap.$$getInstance().setFitView();
          },
        },
        center: [121.59996, 31.197646],
        zoom: 18,
        plugin: [
          {
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 100, //超过10秒后停止定位，默认：无穷大
            maximumAge: 0, //定位结果缓存0毫秒，默认：0
            convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, //显示定位按钮，默认：true
            buttonPosition: "RB", //定位按钮停靠位置，默认：'LB'，左下角
            showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
            extensions: "all",
            pName: "Geolocation",
            events: {
              init(o) {},
            },
          },
          {
            //地图工具条
            pName: "ToolBar",
            init(o) {},
          },
          {
            //左下角缩略图插件 比例尺
            pName: "Scale",
            init(o) {},
          },
        ],
      },

      map: null,
    };
  },
  mounted() {
    this.initMapMarkers();
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    lng: {
      type: String,
    },
    lat: {
      type: String,
    },
    title: {
      type: String,
    },
  },

  methods: {
    /**
     *
     */
    initMapMarkers() {
      var that = this;
      this.markers.push({
        position: [parseFloat(this.lng), parseFloat(this.lat)],
        icon: new AMap.Icon({
          image: "/images/mapWarn.gif",
          size: new AMap.Size(128, 128), //图标大小
          imageSize: new AMap.Size(100, 100),
        }),
        offset: [-20, -50], //设置偏移量是因为把坐标点换成自己的图片后会有偏移
        label: {
          offset: [20, 2],
          content: "<div class='info'>" + this.title + "</div>", //设置文本标注内容e, //设置文本标注内容
          direction: "rigth", //设置文本标注方位
        },
        events: {
          click: (e) => {},
        },
      });
      that.spinning = false;
    },

    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style>
.amap-marker-label {
  border: 0;
  background-color: transparent;
}

.info {
  padding: 4px;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  top: 1rem;
  background-color: white;
  width: auto;
  border-width: 0;
  right: 1rem;
  box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
}
</style>
